<template>
<div>
  插槽的学习
  1、为什么要用插槽？
  答：是为了能够将封装的组件更加通用。
  <hr>
 <!-- <myCard title="卡片名称"></myCard>
 <myCard title="第二次使用卡片组件"></myCard> -->
 <myCard>
    <!--
        具名插槽的使用语法：
        template结合v-slot:插槽名 进行使用
     -->
    <!-- <template v-slot:title>
        v-slot: 可以简写为 #
         -->
    <template #title>
        <el-row type="flex" justify="space-between" >
            <h1>卡片名称</h1>
            <el-button type="text">操作按钮</el-button>
        </el-row>
    </template>
    <ul>
        <li>00001</li>
        <li>00002</li>
        <li>00003</li>
        <li>00004</li>
        <li>00005</li>
    </ul>
 </myCard>

 <myCard :list="arr">
    <template #title>测试</template>
    <!-- 接收作用域插槽传入的值语法：
    v-slot="{变量}" 这个变量就是接收的值-->
    <template v-slot:3="{row}">
        <el-row type="flex" justify="space-between">
            <span>测试 -- {{row}}</span>
            <span>结尾</span>
        </el-row>
    </template>
 </myCard>
</div>
</template>
<script>
export default {
  data () {
    return {
      arr: [1, 2, 3, 4, 5, 6]
    }
  }
}
</script>
<style scoped>
</style>
